<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <script src="./animate.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SuAbrtK1Bu5V9XISRleW91vpdEVQ70IZ">
        </script>
    <!-- <script src="animate.js"></script> -->
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .all {
        width: 26rem;
        height: auto;
        margin: 0 auto;
    }

    .header {
        width: 26rem;
        height: 18rem;
        margin: 0 auto;
        overflow: hidden;
        /* border: 1px solid black; */
        position: relative;
    }

    .box {
        width: auto;
        height: 18rem;
        display: flex;
        position: absolute;
        transition: all 0.5s;
        /* border: 1px solid black; */
    }

    ul li {
        list-style: none;
    }

    li>img {
        width: 26rem;
        height: 18rem;
    }

    .pricedan {
        display: flex;
        justify-content: space-between;
        margin: 0.4rem 0;
        font-size: 0.9rem;
    }

    .pricedan span {
        color: red;
    }

    .pricedan img {
        width: 1rem;
        height: 1.3rem;
    }

    .schoolh {
        margin: 0.6rem 0rem;
    }

    .schoolh span {
        width: 2rem;
        height: 2rem;
        margin: 1rem 0.2rem;
        font-size: 0.9rem;
        background-color: rgb(194, 221, 251);
    }

    .housecate {
        display: flex;
        font-size: 0.8rem;
        justify-content: space-evenly;
    }

    ol li {
        list-style: none;
    }

    .housecate li {
        margin: 0.4rem 0;
    }

    .morenew {
        text-align: center;
        font-size: 0.8rem;
        margin: 0.4rem 0;
        color: rgb(184, 182, 182);
    }

    .housespc {
        width: 26rem;
        height: auto;
        background-color: #fff;
        /* border: 1px solid black; */
    }

    .housespc>div:nth-child(1) {
        font-size: 1.2rem;
        margin: 0.4rem 0;
        color: #ff8a00;
    }

    .housespc>p {
        margin: 1rem;
        line-height: 1.4rem;
        font-size: 0.8rem;
    }

    .huixng {
        font-size: 1.2rem;
        margin: 0.4rem 0;
        color: #ff8a00;
    }

    .housepart {
        border-bottom: 0.1rem solid #ff8a00;
        display: flex;
        padding-bottom: 0.8rem;
        margin-bottom: 0.7rem;
    }

    .housepart1 {
        /* border-bottom: 0.1rem solid #ff8a00; */
        display: flex;
        padding-bottom: 0.8rem;
        margin-bottom: 0.7rem;
    }

    .housepart img {
        width: 6rem;
        height: 6rem;
    }

    .housepart1 img {
        width: 6rem;
        height: 6rem;
    }

    .thenew {
        margin: 0 0.6rem;
        font-size: 0.8rem;
    }

    .thenew>div:nth-of-type(1) {
        margin: 1rem 0;
    }

    .geju span {
        width: 2rem;
        height: 2rem;
        color: rgb(77, 158, 251);
        background-color: rgb(226, 239, 255);
    }

    .schooltruan {
        display: flex;
        font-size: 0.7rem;
    }

    .schooltruan>ol:nth-child(1) {
        color: rgb(137, 136, 136);
    }

    .schooltruan li {
        margin: 1rem 0;
    }

    .delit {
        text-align: center;
        font-size: 0.7rem;
        color: rgb(137, 136, 136);
        margin-bottom: 1rem;
    }

    .house {
        width: 26rem;
        height: auto;
        border-top: 0.1rem solid rgb(140, 138, 138);
        border-bottom: 0.1rem solid rgb(148, 147, 147);
    }

    .house>li {
        width: 20rem;
        height: 9rem;
        display: flex;
        margin-left: 1.8rem;
        margin-top: 1rem;
        /* border-bottom: 1px solid red; */
        padding-bottom: 1rem;
        margin: 1rem 0;
        border-bottom: 0.1rem solid black;
    }

    .house>li:nth-last-child(1) {
        border: none;
    }

    .lit>div:nth-child(1)>img {
        width: 6rem;
        height: 6rem;
        margin-top: 0.6rem;
    }

    .right {
        margin-left: 1rem;
    }

    .right>h3 {
        width: 13rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .right2 {
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
        margin: 0.3rem 0;
        /* color: rgb(187, 179, 179); */
    }

    .left>div {
        margin: 0.3rem 0;
    }

    .left>div:nth-child(2) {
        color: rgb(187, 179, 179);
    }

    .price>div {
        margin: 0.3rem 0;
    }

    .price>div:nth-child(2) {
        color: rgb(187, 179, 179);
    }

    .price>div:nth-child(1) {
        color: #ff8a00;
    }

    .lit span {
        width: auto;
        height: 2rem;
        font-size: 0.6rem;
        color: rgb(81, 140, 236);
        background-color: rgb(152, 204, 252);
    }

    .recommed {
        width: 17rem;
        height: 2rem;
        line-height: 2.1rem;
        margin-top: 0.5rem;
        margin-left: -7rem;
        border-radius: 0.4rem;
        font-size: 0.9rem;
        background-color: rgb(187, 186, 186);
    }

    #container {
        width: 20rem;
        height: 20rem
    }

    .smail {
        text-align: center;
        font-size: 0.9rem;
        color: rgb(137, 136, 136);
        /* margin-bottom: 1rem; */
        margin: 0.9rem 0;
    }
    .bottom{
        width: 26rem;
        height: 10rem;
        background-color: #2f3130 ;
        margin: 1rem auto;
        color: grey;
        position: static;
        z-index: 22;
    }
    .bottom>a{
        font-weight: 900;
        font-size: 1.2;
    }
    .system{
        display: flex;
        justify-content: space-evenly;
        margin-top: 2rem;
    }
    .system img{
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 1rem;
    }
    .system div{
        font-size: 0.7rem;
    }
    .bottomipo,.bottomand{
        display: flex;
    }
    .bottom p{
        text-align: center;
        margin-top: 1rem;
        font-size: 0.7rem;
        font-weight: 700;
    }
    .card{
        width: 25.8rem;
        height: 3rem;
        display: flex;
        margin-top: 0.9rem;
        justify-content: center;
        align-items: center;
        font-size: 0.7rem;
        border-top: none;
        border: 1px solid rgb(152, 151, 151);
    }
    .agent{
        width: 10rem;
        height: 2rem;
        display: flex;
        border-radius: 0.3rem;
        justify-content: center;
        background-color:#ff8a00;
    }
    .agent>span{
       line-height: 2rem;
       margin: 0 0.4rem;
        color: #fff;
    }
    .conttre{
        margin: 0 0.5rem;
        display: flex;
    }
    .conttre>img{
        width: 1.7rem;
        height:1.7rem
    }
    .conttre>span{
        line-height: 1.8rem;
       /* margin: 0 0.4rem; */
    }
</style>

<body>
    <div class="all">
        <div class="header">
            <ul class="box">
                <li><img src="./image/SecondHandList/img.png" alt=""></li>
                <li><img src="./image/SecondHandList/img.png" alt=""></li>
                <li><img src="./image/SecondHandList/img.png" alt=""></li>
                <li><img src="./image/SecondHandList/img.png" alt=""></li>
                <li><img src="./image/rentalList/banner.png" alt=""></li>
            </ul>
        </div>
        <div class="contents">
            <h3>天鹅湾小区精装两居，满五减一，业主换房急售</h3>
            <div class="pricedan">
                <div><span>576</span>万元(单价:46327元/平)</div>
                <div><img src="./image/SecondHandList/phone.png" alt=""></div>
            </div>
            <div>挂牌时间2015年6月20日</div>
            <div class="schoolh">
                <span>学区房</span>
                <span>独家</span>
                <span>满五唯一</span>
            </div>
        </div>
        <div class="housecate">
            <ol>
                <li>户型：3室2厅</li>
                <li>楼层：中楼层</li>
                <li>装修：精装</li>
                <li>年代2004年</li>
                <li>首付：123万</li>
                <li>地铁：离西二旗地铁站800米</li>
                <li>小区：珠江帝景</li>
                <li>学校：北京市第二实验小学</li>
            </ol>
            <ol>
                <li>面积：100平</li>
                <li>朝向：西南</li>
                <li>楼型：塔楼</li>
                <li>区域：西二旗</li>
                <li>月供：15683元</li>
            </ol>
        </div>
        <div class="morenew">更多房源信息</div>
        <div class="housespc">
            <div>房源特色</div>
            <p>小区环境优雅，虽处闹市中 (小区南200米有美廉美超市、西30米有华联商场、星美国际影域、东北角就是大中电器、 小区东100米有汇佳幼儿园、昌平实验一小，昆泰国际大酒...
            </p>
            <div class="morenew">更多特色</div>
        </div>
        <div class="huixng">户型分间</div>
        <div class="housepart">
            <div><img src="./image/SecondHandList/img4.png" alt=""></div>
            <div class="thenew">
                <h4>当前格局</h4>
                <div>分间信息：客厅25平米，南北通透</div>
                <div class="geju">
                    <span>南北通透</span>
                    <span>全明格局</span>
                </div>
            </div>
        </div>
        <div class="housepart1">
            <div><img src="./image/SecondHandList/img4.png" alt=""></div>
            <div class="thenew">
                <h4>当前格局</h4>
                <div>分间信息：客厅25平米，南北通透</div>
                <div class="geju">
                    <span>南北通透</span>
                    <span>全明格局</span>
                </div>
            </div>
        </div>
        <div class="schoolsite">
            <h4>对口学校</h4>
            <div class="schooltruan">
                <ol>
                    <li>学校名称：</li>
                    <li>升学方式：</li>
                    <li>对口中学：</li>
                    <li>划片小区：</li>
                    <li>学校特色：</li>
                </ol>
                <ol>
                    <li>北京市第二实验中学</li>
                    <li>直升、派位</li>
                    <li>团结湖中学</li>
                    <li>3个划片小区在售房源150套</li>
                    <li>包食宿、有校车</li>
                </ol>
            </div>
            <div class="delit">查看学校详情</div>
        </div>
        <div id="container"></div>
        <div class="border">
            <h3>推荐房源</h3>
            <ol class="house">
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
                <li class="lit">
                    <div><img src="./image/index/img1.jpg" alt=""></div>
                    <div class="right">
                        <h3>文化部最中间层&nbsp;一层带的房子aaaa</h3>
                        <div class="right2">
                            <div class="left">
                                <div>
                                    <h5>2室1厅96平南北</h5>
                                </div>
                                <div>红庙北里</div>
                            </div>
                            <div class="price">
                                <div>1105万</div>
                                <div>14268/平</div>
                            </div>
                        </div>
                        <span>学区房</span>
                        <span>独家</span>
                        <div class="recommed">推荐理由：同户型、通风好、采光好</div>
                    </div>
                </li>
            </ol>
        </div>
        <div class="smail">查看更多相似房源</div>
    </div>
    <div class="bottom">
        <a>北京找房无忧网</a> > <a>首页</a>
        <div class="system">
            <div class="bottomipo">
                <img src="./image/index/apple.png" alt="">
                <div>
                    <div>iphone</div>
                    <div>客户端</div>
                </div>
            </div>
            <div class="bottomand">
                <img src="./image/index/android.png" alt="">
                <div>
                    <div>Android</div>
                    <div>客户端</div>
                </div>
            </div>
        </div>
        <p>北京找房无忧房地产经纪有限公司</p>
        <p>网络经营许可证&nbsp;京ICP备20160812号-12</p>
        <div class="card">
            <div class="agent">
                <img src="./image/SecondHandList/user.png" alt="">
                <span>联系经纪人</span>
            </div>
            <div class="conttre">
                <img src="./image/SecondHandList/xin.png" alt="">
                <span>关注</span>
            </div>
        </div>
    </div>
    <script>
        var header = document.querySelector('header')
        var box = document.querySelector('.box')
        var headerWidth = box.children[0].offsetWidth;
        console.log(box.children[0].offsetWidth);
        console.log(box.children.length);
        // box.style.left = -2 * headerWidth + 'px'
        var num = 0
        setInterval (function(){
            box.style.left = -num * headerWidth + 'px'
            num++
            console.log(num);
            if(num == box.children.length+1){
                num = 0
                box.style.left = -num * headerWidth + 'px'

            }
        },2000)
        // animate(box,-num * headerWidth)

        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 15); 
    </script>
</body>

</html>